<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :request-api="funcDicFindBySet"
      :columns="dataGrid.columns"
      :pagination="false"
      :init-param="dataGrid.initParam"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template v-for="item in requiredField" :key="item.prop" #[`${item.prop}Header`]="scope">
        <SvgIcon name="svg-require" class="table-svg-require" v-if="isAddFlag"></SvgIcon>
        {{ scope.column.label }}
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import { ProTableInstance } from "@/components/ProTable/interface";

import { funcDicFindBySet } from "$api/auth/funMenu";

import { useDataGrid } from "./hooks/use-dataGrid";

const proTableBox = ref<ProTableInstance>();

const { dataGrid, isAddFlag, requiredField } = useDataGrid(proTableBox);
</script>
